<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title></title>
	<style>
		.list {
			display: flex;
			flex-wrap: wrap;
			list-style: none;
			margin: 0;
			padding: 0;
		}

		.item {
			flex: 0 0 25%;
			min-width: 1px;

			position: relative;
			height: 50px;
			line-height: 50px;
			text-align: center;
		}

		.item>div {
			border: 1px solid black;
			background-color: red;
			height: 100%;
		}

		.item>input {
			position: absolute;
			z-index: 1;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			border: none;
			-webkit-appearance: none;
			color: #fff;
			font-size: 30px;
			outline: none;
		}

		.item>input:checked+div {
			background-color: rgb(29, 29, 122);
		}

		.asd:first-child {
			color: blue;
		}

		.asd:last-child {
			color: green;
		}
	</style>
</head>

<body>
	<ul class="list">
		<li class="item asd">
			<input type="checkbox" name="group" id="">
			<div>A</div>
		</li>
		<li class="item asd">
			<input type="checkbox" name="group" id="" value="B">
			<div>B</div>
		</li>
		<li class="item">
			<input type="checkbox" name="group" id="" value="C">
			<div>C</div>
		</li>
		<li class="item asd">
			<input type="checkbox" name="group" id="" value="D">
			<div>D</div>
		</li>
	</ul>
</body>

</html>